<template>
  <list-detail-layout :col-props="{md:[18,6]}">
    <template #detailMain>
      <div class="carModelDetailMain h100">
        <div class="carModelDetailMainBottom">
          <!-- <a-tabs @change="changeTab" class="tabCommon" :active-key="activeKey"> -->
            <!-- 车辆升级信息 -->
            <!-- <a-tab-pane key="carUpgradeInformation" tab="车辆升级信息"> -->
              <car-upgrade-information-list :activeKey="activeKey" :id="id" :vehicleId="vehicleId" :taskInfo="taskInfo"></car-upgrade-information-list>
            <!-- </a-tab-pane> -->
            <!-- 审批信息 暂不开发，先屏蔽 -->
            <!-- <a-tab-pane key="taskApprovalInfo" tab="审批信息">
              <task-approval-info-list :activeKey="activeKey"></task-approval-info-list>
            </a-tab-pane> -->
          <!-- </a-tabs> -->
        </div>
      </div>
    </template>
    <template #detailRight>
      <fota-basic-information :id="id" @getTaskInfo="getTaskInfo"></fota-basic-information>
    </template>
  </list-detail-layout>
</template>
<script>
import FotaBasicInformation from '@/views/vehicle/components/FotaBasicInformation.vue'
import ListDetailLayout from '@/views/components/ListDetailLayout'
import CarUpgradeInformationList from '@/views/vehicle/components/CarUpgradeInformationList.vue'
import TaskApprovalInfoList from '@/views/vehicle/components/TaskApprovalInfoList.vue'
const initTabKey = 'carUpgradeInformation'
export default {
  components: {
    FotaBasicInformation,
    ListDetailLayout,
    CarUpgradeInformationList,
    TaskApprovalInfoList
  },
  props: {
    vehicleId: {
      type: String,
      default: ''
    },
    vin: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  computed: {
  },
  data () {
    return {
      activeKey: initTabKey,
      taskInfo: {}
    }
  },
  methods: {
    changeTab (key) {
      this.activeKey = key
    },
    getTaskInfo (val) {
      this.taskInfo = val
    }
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.carModelDetailComp {
  flex:1 0 0;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  .carModelDetailCompMain {
    flex:1 0 0;
    border-bottom:1px solid @borderColor;
    border-top:1px solid @borderColor;
    overflow:hidden;
  }
  .carModelDetailCompFooter {
    flex:none;
    padding:15px 24px 15px 24px;
  }
  .carModelDetailLeft {
    overflow: auto;
    padding:24px;
  }
  .carModelDetailRight {
    border-left:1px solid @borderColor;
    overflow: auto;
    padding:24px;
  }
}
.carModelDetailMain {
  display: flex;
  flex-direction: column;
  .carModelDetailMainTop {
    margin-bottom: 20px;
    flex: none;
    >.ant-row-flex {
      align-items: center;
    }
    .carIconCol {
      margin-right: 20px;
    }
    .carIcon {
      font-size: 74px;
    }
    .carModelDetailMainTopDesc {
      >h5 {
        font-size:18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
      }
      >p{
        font-size: 1em;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
::v-deep .ant-tabs-bar {
  margin: 0 0 10px 0 !important;
}
</style>
